<template>
  <div class="indexContanier">
    <!-- 头部 -->
    <baidu-map
      class="bm-view"
      mapType="BMAP_SATELLITE_MAP"
      :scroll-wheel-zoom="true"
      @ready="mapReady"
    >
      <bm-marker
        v-for="marker in markers"
        :data-id="marker.id"
        :key="marker.id"
        :position="marker.geo"
        :icon="marker.img"
        @click="move(marker.id)"
      >
        <bm-label
          :content="marker.text"
          :labelStyle="{
            color: '#fff',
            textAlign: 'center',
            borderRadius: '5px',
            fontSize: '20px',
            background: 'rgba(88,213,255,0.47)',
            border: '0',
            width: '250px',
            lineHeight: '30px',
            marginLeft: '-50px',
            marginTop: '-60px',
          }"
          :offset="{ width: -65, height: 25 }"
        />
      </bm-marker>
    </baidu-map>
    <div class="abs top">
      <img src="../../assets/icon/log.png" width="40" alt="logo" />
      <span>山湖水库大坝自动化监测云平台</span>
      <!-- <img :src="systemObj.systemLogo" width="50" alt="" />
      <span>{{ systemObj.systemTitle }}</span> -->
    </div>
    <div class="abs left">
      <div class="leftContent">
        <div class="sum">
          <div class="sumlog">
            <img src="../../assets/icon2/fz.png" alt="" />
          </div>
          <div class="lefttitle">
            <p>站点总数/在线/停用</p>
            <p>
              <span class="bigtitle">{{ homeList.sum }}</span
              ><span class="smalltitle"
                >{{ homeList.online }}/{{ homeList.offline }}</span
              >
            </p>
          </div>
        </div>
        <!-- <div class="sum">
          <div class="sumlog">
            <img src="../../assets/icon2/caidan.png" alt="" />
          </div>
          <div class="lefttitle">
            <p>当日预警/本月预警</p>
            <p>
              <span class="bigtitle">待定</span
              ><span class="smalltitle">/待定</span>
            </p>
          </div>
        </div> -->
      </div>
    </div>
    <div class="abs right">
      <el-row type="flex" justify="end">
        <el-col :span="24">
          <div>
            <span style="width: 133px">{{ time }}</span
            ><br />
            <span style="color: lightblue">{{ date }}</span>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="weather">
            <img :src="weather.weather_pic" width="32" />
            <span style="margin-left: 50px"
              >{{ weather.temperature }}&#8451;</span
            >&nbsp;
            <span>{{ weather.weather }}</span>
            <p>
              <span>当前降水概率：{{ weather.sd }}</span>
            </p>
          </div>
          <el-divider direction="vertical"></el-divider>
          <img
            src="../../assets/icon2/avatar.png"
            alt="avatar"
            @click="avatar"
            style="cursor: pointer"
          />
          <div class="dropDown" v-show="show">
            <div style="marginbottom: 5px" @click="changePwd">修改密码</div>
            <div @click="exit">退出</div>
          </div>
        </el-col>
      </el-row>
      <div class="list">
        <div class="title">
          <b></b>
          <p>项目列表</p>
        </div>
        <ul>
          <li v-for="(item, index) in siteList" :key="index">
            <i><img src="../../assets/icon2/list.png" alt="" /></i
            ><span
              @click="move(item.id)"
              style="cursor: pointer; background: #559093"
              >{{ item.monitorName }}</span
            >
          </li>
        </ul>
      </div>
      <div class="regional">
        <!-- <Regional></Regional> -->
      </div>
    </div>
    <div class="abs bottom">
      <WeatherChart></WeatherChart>
      <!-- <SensorStatistics></SensorStatistics> -->
      <SiteOnline></SiteOnline>
      <WarningStatistics></WarningStatistics>
      <!-- <Overrun></Overrun> -->
    </div>
  </div>
</template>
<script>
import Regional from "../../components/regional";
import WeatherChart from "../../components/weather";
import SiteOnline from "../../components/siteOnline";
import Overrun from "../../components/overrun";
import SensorStatistics from "../../components/SensorStatistics";
import WarningStatistics from "../../components/WarningStatistics";
import * as serviceApi from "../../common/service.config";
import Axios from "axios";
import moment from "moment";
Axios.defaults.withcredentials = true;

export default {
  name: "home",
  components: {
    Regional,
    WeatherChart,
    SiteOnline,
    Overrun,
    SensorStatistics,
    WarningStatistics,
  },
  props: {},
  data() {
    return {
      // systemObj: {
      //   systemLogo: null,
      //   systemTitle: null,
      // },
      homeList: {
        sum: 0,
        online: 0,
        offline: 0,
        dateWarn: 0,
        monthWarn: 0,
      },
      markers: [],
      time: null,
      date: null,
      weather: {
        temperature: null,
        weather: null,
        weather_pic: null,
        sd: null,
      },
      show: false,
      siteList: null,
    };
  },
  // beforeCreate() {
  //   this.openLoading();
  // },
  created() {
    // let projectInfo = window.localStorage.getItem("projectInfo");
    // projectInfo = JSON.parse(projectInfo);
    // this.systemObj.systemLogo =
    //   serviceApi.URL_IMAGE_VIEW + projectInfo.systemLogo;
    // this.systemObj.systemTitle = projectInfo.systemTitle;
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data:
        'appMsg={"parameter":"{}","serviceCode":"' +
        serviceApi.CONSTANT.LIST_MONITOR_AND_SENSOR +
        '","timestamp":"","uuid":""}',
    }).then((res) => {
      let arr = res.data.parameter.list;
      this.siteList = arr;
      for (let i in arr) {
        ((i) => {
          let point = new BMap.Point(arr[i].longitude, arr[i].latitude);
          this.translate(point, (data) => {
            if (data.status == 0) {
              point = new BMap.Point(data.points[0].lng, data.points[0].lat);
              let marker = {
                id: arr[i].id,
                geo: point,
                text: arr[i].monitorName,
                img: {
                  url: require("../../assets/icon2/dingdian.png"),
                  size: { width: 32, height: 32 },
                },
              };
              this.markers.push(marker);
            }
          });
        })(i);
      }
    });
    let fun = async () => {
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        headers: {
          "content-type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
        data:
          'appMsg={"parameter":"{}","serviceCode":"' +
          serviceApi.CONSTANT.LIST_MONITOR_AND_SENSOR +
          '","timestamp":"","uuid":""}',
      }).then((res) => {
        console.log(res);
        let arr = res.data.parameter.list;
        this.homeList.sum = 0;
        this.homeList.online = 0;
        this.homeList.offline = 0;
        for (let i in arr) {
          let list = arr[i].sensorList;
          for (let k in list) {
            this.homeList.sum++;
            if (list[k].sensorStatus == "10") {
              this.homeList.online++;
            } else if (list[k].monitorId == 2) {
              this.homeList.offline++;
            }
          }
        }
      });
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        headers: {
          "content-type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
        data: `appMsg={"parameter":"{\\"monitorId\\":\\"1\\"}","serviceCode":"${serviceApi.CONSTANT.QUERY_WEATHER_INFO}","timestamp":"","uuid":""}`,
      }).then((res) => {
        res = JSON.parse(res.data.parameter);
        this.weather = res.now;
      });
    };
    fun();
    const timer = setInterval(async () => {
      await fun();
    }, 1000 * 30);
    const timer2 = setInterval(() => {
      let day;
      switch (moment().day()) {
        case 0:
          day = "星期日";
          break;
        case 1:
          day = "星期一";
          break;
        case 2:
          day = "星期二";
          break;
        case 3:
          day = "星期三";
          break;
        case 4:
          day = "星期四";
          break;
        case 5:
          day = "星期五";
          break;
        case 6:
          day = "星期六";
          break;
      }
      this.date = moment().format("YYYY/MM/DD") + " " + day;
      this.time = moment().format("HH:mm:ss");
    }, 1000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
      clearInterval(timer2);
    });
  },
  methods: {
    move(id) {
      window.open("/site?id=" + id);
    },
    avatar() {
      if (this.show) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    exit() {
      sessionStorage.removeItem("token");
      this.$router.push("login");
    },
    changePwd() {
      this.$router.push("changePwd");
    },
    //创建地图
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(118.766713, 32.487505);
      map.centerAndZoom(this.point, 17);
    },
    translate(pt, callback) {
      let pts = [];
      pts.push(pt);
      const convertor = new BMap.Convertor();
      convertor.translate(pts, 1, 5, callback);
    },
  },
  computed: {},
  watch: {},
};
</script>

<style  lang='less' scoped>
.indexContanier {
  height: 100%;
  width: 100%;
}
.bm-view {
  width: 100%;
  height: 100%;
  /deep/ .anchorBL {
    display: none;
    visibility: hidden;
  }
}
.abs {
  position: absolute;
}
.top {
  top: 0;
  height: 8%;
  width: 100%;
  background: linear-gradient(to bottom, rgb(0, 0, 0), transparent);
  z-index: 1;
}
.top img {
  margin-top: 1rem;
  margin-left: 0.5rem;
}
.top span {
  position: absolute;
  top: 20%;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
  color: lightblue;
  margin-left: 0.5rem;
  background-image: -webkit-linear-gradient(bottom, #89bbf9, #91dbfc, #8ce5ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.left {
  left: 0;
  top: 0;
  width: 15%;
  height: 100%;
  background: linear-gradient(to right, rgb(0, 0, 0), transparent);
}
.left .leftContent {
  margin-top: 170px;
}
.left .sum {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.left .sum .sumlog {
  padding-right: 15px;
  border-right: 2px solid #a1a2a0;
}
.left .lefttitle {
  margin-left: 10px;
  color: #fff;
}
.left .lefttitle .bigtitle {
  font-size: 36px;
  color: #00f6ff;
}
.left .lefttitle .smalltitle {
  font-size: 20px;
  color: #00f6ff;
  margin-left: 20px;
}

.right {
  right: 0;
  top: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(to left, rgb(0, 0, 0), transparent);
  z-index: 2;
}
.right .el-col {
  margin-top: 10px;
  display: flex;
  align-items: center;
  position: relative;
  .dropDown {
    width: 100px;
    line-height: 30px;
    text-align: center;
    color: #42f8ff;
    cursor: pointer;
    position: absolute;
    top: 100%;
    left: 70%;
    z-index: 1;
    div {
      background: linear-gradient(
        to top,
        rgba(175, 177, 178, 0.6),
        rgba(53, 54, 55, 0.6)
      );
    }
  }
  .weather {
    position: relative;
    img {
      margin-left: 30px;
      position: absolute;
      top: -10%;
      left: -10%;
    }
  }
}
.el-divider {
  margin: 0 15px;
  background: #42f8ff;
}
.right span {
  display: inline-block;
  color: #42f8ff;
  text-align: center;
}
.right .regional {
  margin-top: 20px;
  margin-left: 30px;
}
.right .list {
  margin-top: 50px;
  margin-left: 30px;
}
.right ul {
  margin-top: 15px;
  margin-left: 10px;
  height: 200px;
}
.right ul li {
  padding: 10px 0;
}
.right ul li i {
  margin-right: 5px;
  vertical-align: middle;
}
.right ul li span {
  color: #fff;
}
.bottom {
  bottom: 1%;
  width: 100%;
  height: 30.5%;
  background: linear-gradient(to top, rgb(0, 0, 0), transparent);
  display: flex;
  justify-content: space-between;
  z-index: 3;
}
</style>
